<template>
  <view class="feedback-layout">
    <my-header title="问题反馈"></my-header>
    <my-content class="content">
      <view class="box">
        <view class="item">
          <view class="label">
            <view class="label_red">*</view>
            <view>问题描述</view>
          </view>
          <textarea
            placeholder="输入您要反馈的问题或建议,我们将认真为您解答"
            type="textarea"
            maxlength="200"
            class="input text"
            v-model="params.content"
          />
          <view class="num_box">
            {{ params.content.length }}
            <text class="num">/{{ num }}</text>
          </view>
        </view>
      </view>
      <view class="submit" @click="submit()">提 交</view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api'
export default {
  data() {
    return {
      params: {
        content: '',
      },
      num: 200,
    }
  },
  onLoad(option) {},
  onShow() {},

  methods: {
    submit() {
      if (!this.params.content) {
        this.show('请完善表单')
        return
      }
      if (this.params.content.length > 200) {
        this.show('备注最多200字')
        return
      }
      uni.showLoading({
        title: '提交中',
      })
      api.feedback
        .store(this.params)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show(res.msg)
            uni.navigateBack()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background-color: #141414;
	display: flex;
	flex-direction: column;
  .box {
		flex: 1;
    display: flex;
    flex-direction: column;

    width: 670rpx;
    margin: 0 auto;
    .item {
      display: flex;
      flex-direction: column;
      position: relative;
      .label {
        display: flex;
        align-items: center;
        color: white;

        .label_red {
          font-size: 36rpx;
          color: red;
          margin-right: 5rpx;
        }
      }
      &:first-child {
        margin-top: 60rpx;
      }
      .input {
        width: 670rpx;
        height: 60rpx;
        padding: 22rpx;
				box-sizing: border-box;
        margin: 20rpx auto;
        background-color: #1f1f1f;
				color: #808080;
				font-size: 28rpx;
        &.text {
          height: 300rpx;
        }
      }
      .num_box {
        bottom: 30rpx;
        position: absolute;
        right: 22rpx;
				color: red;
				font-size: 26rpx;
        .num {
          color: #808080;
        }
      }
    }
  }

  .submit {
    width: 610rpx;
    margin: 20rpx auto;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    color: #fff;
    background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
		background-size: 100% 100%;
		font-size: 32rpx;
  }
}
</style>
